import type { Config } from 'tailwindcss';
const borderColor = {
  light: 'var(--el-border-color-light)',
  lighter: 'var(--el-border-color-lighter)',
  'extra-light': 'var(--el-border-color-extra-light)',
  dark: 'var(--el-border-color--dark)',
  darker: 'var(--el-border-color--darker)',
  color: 'var(--el-border-color)'
};

const textColor = {
  regular: 'var(--el-text-color-regular)',
  secondary: 'var(--el-text-color-secondary)',
  disabled: 'var(--el-text-color-disabled)',
  placeholder: 'var(--el-text-color-placeholder)',
  color: 'var(--el-text-color-primary)'
};
const space = {
  xxs: '4px',
  xs: '6px',
  sm: '8px',
  DEFAULT: '10px',
  md: '12px',
  lg: '14px',
  xl: '16px',
  xxl: '18px',
  '2x': '20px',
  '3x': '30px'
};
const fontSize = {
  xs: '12px',
  sm: '13px',
  DEFAULT: '14px',
  md: '16px',
  lg: '18px',
  xl: '20px',
  xxl: '24px'
};
export default {
  darkMode: 'class',
  corePlugins: {
    preflight: false
  },
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      colors: {
        bg_color: 'var(--el-bg-color)',
        primary: 'var(--el-color-primary)',
        text_color_primary: 'var(--el-text-color-primary)',
        text_color_regular: 'var(--el-text-color-regular)'
      },
      margin: space,
      padding: space,
      fontSize,
      borderColor,
      textColor
    }
  }
} satisfies Config;
